<template>
  <section class="main-content">
    <div class="section-cont ls-add mt-10">
      <el-row class="section-container" :gutter="20">
        <el-col :span="24">
          <div class="grid-content">
            <ul v-if="catList.length > 0">
              <li v-for="item in catList" v-bind:key="item" @click="urlto('category?id='+item.id)">
                <a>
                  <span>{{ item.title }}</span>
                </a>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="section-cont main-con mt-10 mb-20">
      <el-row class="section-container" align="middle" :gutter="20">
        <el-col class="mb-20" :span="2">
          <div class="grid-content text-center">
                <div><el-icon title="点赞"><StarFilled /></el-icon></div>
                <div><el-icon title="分享"><Share /></el-icon></div>
                <div>打赏</div>
          </div>
        </el-col>
        <el-col class="mb-20 article-content" :span="16">
          <div class="grid-content">
              <h2>{{ article.title }}</h2>
            <div style="border-bottom: 1px solid #ccc;margin-bottom: 15px;">
              {{ article.updateTime }}
<!--          <el-icon><StarFilled /></el-icon>16   <el-icon><Share /></el-icon>2.7W
               <el-tag class="f-r mr-8" size="small" type="success">PHP</el-tag>
              <el-tag class="f-r mr-8" size="small" type="info">JAVA</el-tag>
              <el-tag class="f-r mr-8" size="small" type="warning">MYSQL</el-tag>
              <el-tag class="f-r mr-8" size="small" type="danger">SPRING</el-tag>-->
            </div>
            <div style="background: #efefef;text-indent: 2em;line-height: 2em;">
              <p style="padding:0 10px;line-height: 2em;">
                {{article.description}}
              </p>
            </div>
            <div class="article-content" v-html="article.content"></div>
          </div>
        </el-col>
        <el-col class="mb-20" :span="6">
          <div v-if="hotArticle.length>0" class="grid-content">
            <ul>
              <li><span class="mb-10" style="font-size:18px;">最新发布:</span></li>
              <li v-for="item in hotArticle" v-bind:key="item" @click="urlto( 'article?id='+ item.id)">
                <a style="color:var(--color-gray)">{{ item.title }} <span class="f-r mr-8">{{ item.category.title }}</span></a>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </section>
</template>
<script>
export default {
  name: "article.vue",
  components: {
  },
  data() {
    return {
      params:this.$route.params,
      article:{},
      catList:sessionStorage.getItem('access-catList')?JSON.parse(sessionStorage.getItem('access-catList')):[],
      hotArticle:sessionStorage.getItem('access-hotArticle')?JSON.parse(sessionStorage.getItem('access-hotArticle')):[],
    }
  },
  watch:{

  },
  async created(){
    if(this.$route.params.id && this.$route.params.id > 0){
      await this.getDataByApi();
    }else{
      this.$router.push({name:'home'}).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    console.log(this.article)
  },
  methods: {
    async getDataByApi(){
      if(this.catList.length == 0){
        await this.$API.home.getCatList().then(res => {
          if(res.message == "OK"){
            this.catList = res.data
            sessionStorage.setItem('access-catList',JSON.stringify(this.catList))
          }else{
            this.$message.error('接口失效')
            return false;
          }
        })
      }
      console.log(this.$route.params.id)
      await this.$API.home.getArticle({id:this.params.id}).then(res => {
        if(res.message == "OK"){
          this.article = res.data
        }else{
          this.$message.error('接口失效')
          return false;
        }
      })
      if(this.hotArticle.length == 0) {
        await this.$API.home.getHotArticle({istop: 1, ishot: 1, limit: 8}).then(res => {
          if (res.message == "OK") {
            this.hotArticle = res.data
          } else {
            this.$message.error('接口失效')
            return false;
          }
        })
      }
    },

    paramsGet(key){
      const params = {};
      if(key.includes("&")){
        const mParams = key.split('&')
        for(const item in mParams){
          const temp = mParams[item].split('=')
          params[temp[0]] = temp[1]
        }
      }else{
        const temp = key.split('=')
        params[temp[0]] = temp[1]
      }
      return params;
    },

    urlto(key){
      console.log('jump:'+ key)
      if(key.includes("?")){
        const keyPath =  key.split('?')
        this.$router.push({name:keyPath[0],params:this.paramsGet(keyPath[1])}).catch(err => {
          console.log(err)
        })
      }else{
        this.$router.push({name:key}).catch(err => {
          console.log(err)
        })
      }
    }
  }
}
</script>

<style typeof="scss" scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.main-content{
  margin-top: 100px;
}
.main-content .section-cont{
  margin: auto;
  width: var(--web-width);
}
.main-content .section-container{
  display: flex;
  justify-content: space-between;
  margin: auto;
  width: var(--web-width);
  line-height: 30px;
  letter-spacing: -.03em;
  overflow:hidden;
}

.ls-add ul{
  background: #dedede;
  border-radius: 4px;
  overflow: hidden;
}
.ls-add ul li{
  float: left;
  margin: 0 35px
}
.ls-add ul li a{
  color:#ffffff;
}
.ls-add ul li:hover a{
  color: var(--color-red)
}
.ls-add ul li a span{

}
.main-con .section-container{
  background: var(--color-lightGrey);
  align-items: baseline;
}
.main-con .section-container .article-content{
  background-color: rgb(255, 255, 255);
  margin: 20px 0px;
  border-radius: 4px;
  min-height:500px;
}
.article-content{
  line-height: 2em;
}
.article-content b.x{
  font-size: 14px;
  margin-bottom:10px;
  display: inline-block;
}
.article-content b.y{
  font-size: 12px;
  color:#607cf2
}
.article-content b.z{
  font-size: 12px;
  color: #ccc
}
.article-content p{
  text-indent: 2em;
}
.article-content ul{
}
.article-content ul li{
  text-indent: 2em;
}
.article-content pre {
  display: block;
  font-family: monospace;
  background: #e2e0e0;
  margin: 8px 2em;
  color: #4f4f4f;
  padding-left: 2em;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>